<template>
  <div class="order-list">
    <div v-for="items in orderList" :key="items.orderNumber">
      <!-- v-if="showFn(items)" -->
      <div class="items">
        <p class="title">大厂全顺机动车检测有限公司</p>
        <div class="clearfix">
          <img class="fl" src="@/assets/img/company-img.png" />
          <div class="fl center">
            <p>号牌号码：{{items.carNum}}</p>
            <p>提交时间：{{items.dateStr}}</p>
            <p>车检时间：{{items.times}}</p>
            <p>车检进度：{{items.statusStr}}</p>
          </div>
          <button class="fr" v-if="state" @click="buttonClick(items)">查询进度</button>
          <span v-else>
            <button
              class="fr"
              v-if="orderState.length"
              @click="buttonClick(items)"
            >{{stateFn(items)}}</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLocal } from '@/utils/storage'
import { getDate } from '@/utils/index'
export default {
  name: 'order',
  data() {
    return {
      carUser: JSON.parse(getLocal('userInfo')),
      orderList: [],
      orderState: [],
      // notLen: 0,
      state: null
    }
  },
  created() {
    if (this.$route.query.state === 'progress') {
      this.state = true
      window.title = '进度详情'
    }
    this.dataDir('carOrderStatus')
    this.queryOrder()
  },
  mounted() {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
  },
  methods: {
    // 车检数据查询
    async queryOrder() {
      let params = {
        userId: this.carUser.id
      }
      let { data } = await this.$api.queryOrder(params)

      if (data && data.list.length !== 0) {
        this.orderList = data.list.map(el => {
          el.dateStr = getDate(el.updateTime).h

          return el
        })
      } else {
      }

      console.log(data, '------------------- 车检数据查询 ----------------')
    },
    // 获取车辆数据字典
    async dataDir(e) {
      let res = await this.$api.dataDir({
        type: e
      })
      console.log(res, '------------------- 获取车辆数据字典 ----------------')

      if (res.status === 200 && res.data) {
        console.log(JSON.stringify(res.data.list))
        this.orderState = res.data.list
      }
    },
    buttonClick(el) {
      console.log(el, 'el')
      if (this.state) {
        this.$router.push({
          name: 'progress',
          params: {
            carInfo: el
          }
        })
      } else {
        // 点击缴费
        if (el.status <= 20) {
          this.$router.push({
            name: 'orderPay',
            params: {
              carInfo: el
            }
          })
        }
        // 打印单据
        if (el.status >= 25 && el.status <= 35) {
          this.$router.push({
            name: 'printDetails',
            params: {
              carInfo: el
            }
          })
        }
        // 点击评价
        if (el.status >= 60) {
        }
      }
    },
    // 工具
    stateFn(row) {
      // 单据打印完成
      if (row.status >= 25 && row.status <= 35) {
        return '打印单据'
      }

      // 还没支付
      if (row.status <= 20) {
        return '点击缴费'
      }

      // 订单完成
      if (row.status >= 60) {
        return '点击评价'
      }
      // return row.status
    }
    // 显示订单查询 可看进度
    // showFn(row) {
    //   if (this.$route.query.state === 'progress') {
    //     if (row.status >= 25 && row.status != 40) {
    //       this.notLen++
    //       return
    //     }
    //   }
    // }
  },
  beforeRouteLeave(to, from, next) {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  }
}
</script>

<style lang="less" scoped>
.order-list {
  .items {
    width: 94%;
    border-radius: 0.16rem;
    background-color: #fff;
    padding: 0 0.16rem 0.267rem 0.253rem;
    margin: 0.4rem auto 0;

    .title {
      font-size: 0.253rem;
      color: #706d6d;
      height: 0.8rem;
      line-height: 0.8rem;
    }
    img {
      width: 1.88rem;
      height: 1.827rem;
      margin-right: 0.267rem;
    }
    .center {
      padding-top: 0.053rem;
      p {
        font-size: 0.333rem;
        line-height: 0.467rem;
        color: #000;
        letter-spacing: 0.027rem;
      }
    }
    button {
      padding: 0 0.2rem;
      height: 0.667rem;
      line-height: 0.667rem;
      text-align: center;
      font-size: 0.16rem;
      color: #fff;
      background-color: #fd4b05;
      letter-spacing: 0.027rem;
      border: 0;
      border-radius: 0.32rem;
      margin-top: 12%;
      margin-right: 1%;
    }
  }
}
</style>